<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>水平菜单</title>
<style>
	body{
		font:12pt Verdana,Arial,Georgia,sans-serif;
	}
	#header{
		width:auto;
	}
	#logo{
		float:left;
	}
	#nav{
		float:left;
		margin:85px 0px 0px 50px;
		width:400px;
		background-color:#628794;
		border:1px solid black;
	}
	#nav ul{
		list-style:none;
		display:inline;
		margin:0px;
		padding:0px;
	}
	#nav li{
		display:inline;
		line-height:1.8em;
	}
	#nav ul li a:link,#nav ul li a:visited{
		font-size:10pt;
		font-weight:bold;
		text-decoration:none;
		padding:7px 10px 7px 10px;
		background-color:#628794;
		color:#fff;
	}
	#nav ul li a:hover,#nav ul li a:active{
		font-size:10pt;
		font-weight:bold;
		text-decoration:none;
		padding:7px 10px 7px 10px;
		background-color:#c6a648;
		color:#000;
	}
	#content{
		width:auto;
		float:left;
		clear:left;
	}
	#content a{
		text-decoration:none;
		font-weight:bold;
	}
	a.more{
		position:relative;
		z-index:24;
	}
	a.more:hover{
		z-index:25;
	}
	a.more span{
		display:none;
	}
	a.more:hover span{
		font-weight:bold;
		display:block;
		position:absolute;
		top:-35px;
		width:400px;
		padding:3px;
		color:#f00;
		line-height:1em;
	}
</style>
</head>

<body>
	<div id='header'>
  	<div id='logo'>
    	<img src='logo.jpg' alt="logo" />
    </div>
    <div id='nav'>
    	<ul>
      	<li><a class="more" href="#">About Us <span>We are pretty
        great.</span></a></li>
        <li><a class="more" href="#">Products <span>Our products are
        the best.</span></a></li>
        <li><a class="more" href="#">Support <span>It is unlikely you
        will need support, but we proivde it anyway.</span></a></li>
        <li><a class="more" href="#">Press <span>Read what others are
        saying (about how great we are).</span></a></li>
      </ul>	
    </div>
  </div>
  <div id="content">
  	<p><strong>ACME Widgets LLC</strong> is the greatest widget-maker
    in all the land.</p>
    <p>Don't believe us?Read on...</p>
    <ul>
    	<li><a href="#">About Us</a>: We are pretty great.</li>
      <li><a href="#">Products</a>: Our products are the best.</li>
      <li><a href="#">Support</a>: It is unlikely you will need support,
      but we provide it anyway.</li>
      <li><a href="#">Press</a>: Read whtat others are aying (about how
      great we are).</li>
    </ul>
    
  </div>
</body>
</html>
